<div id="app">
    <admin-page-header>
        <bi-button icon="fa-globe" type="info">更多应用 </bi-button>
    </admin-page-header>
    <div class="container">
        <div class="row">
            <div class="col-12" v-for="item in list" :key="item.name">
                <div class="app-item card" >
                    <div class="picture">
                        <bi-picture :src="item.icon" width="100" height="100"></bi-picture>
                        <bi-switch v-model="item.status" v-if="item.name !='admin'" @change="statusChange(item)"></bi-switch>
                    </div>
                    <div class="info">
                        <h5>{{item.title}} <span class="name">{{item.name}}</span> <span class="version">{{item.version}}</span></h5>
                        <div class="author">{{item.author}}</div>
                        
                        <div class="description">{{item.description}}</div>
                        
                    </div>
                    <div class="actions" v-if="item.name !='admin'" >
                        <bi-button v-if="item.install" icon="fa-hdd-o" type="primary" @click="install(item)">安装数据库</bi-button>
                    </div>
                </div>
            </div>
        </div>
                
    </div>

</div>

<script>

import setupDatabaseDialog from  'app/setup-database-dialog.vue';
let app = admin.createApp({
    data(){
        return {
            list:[],
            loading:false
        }
    },
    methods:{
        getList(){
            this.loading = true;
            this.$ajax({
                url:this.$url({app:'admin',controller:'app',action:'list'}),
                success:(data)=>{
                    this.list = data;
                    this.loading = false;
                }
            })
        },
        install(item){
            this.$dialog({
                type:'vue',
                content:admin.createApp(setupDatabaseDialog,{app:item.name}),
                callback:()=>{

                }
            });
        },
        statusChange(app){
            if (app.install && app.status === true){
                this.$confirm({
                    text:'建议先删除安装目录再启用应用',
                    type:'warning',
                    okButton:'继续启用'
                },()=>{
                    this.status(app)
                });
            }else{
                this.status(app);
            }
        },
        status(app){
            this.$loading();
            this.$ajax({
                url:this.$url({app:'admin',controller:'app',action:'status'}),
                data:{
                    app:app.name,
                    status:app.status
                },
                success:(data)=>{
                    this.$admin.userInit(()=>{
                        this.$loading(false);
                        window.location.reload();
                    });
                },
                over:()=>{
                    this.getList();
                    this.$admin.userInit();
                }
            })
        }
    },
    mounted(){
        this.getList();
    }
})

app.mount('#app');
</script>


<style>
.app-item{
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}
.app-item .picture{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.app-item .info{
    padding-left: 10px;
    padding-right: 40px;
    flex: 1;
}

.app-item .name,
.app-item .version{
    font-size: 14px;
}

.app-item  .actions{
    padding-right: 20px;
}
.description{
    font-size: 14px;
    color:var(--bs-gray-500);
}
</style>